<template>
  <easy-window title="朋友权限" ref="easyWindowRef" @confirm="handleSubmit">
    <div class="app-container" style="height: 280px;">
      <div class="sub-color">朋友权限</div>
      <n-card>
        <n-radio-group v-model:value="permissionType" name="radiogroup">
          <n-radio key="1" value="1">
            聊天、朋友圈、微信运动等
          </n-radio>
          <n-radio key="2" value="2">
            仅聊天
          </n-radio>
        </n-radio-group>
      </n-card>

      <template v-if="permissionType === '1'">
        <div class="sub-color">朋友圈和状态</div>
        <n-card>
          <n-list>
            <n-list-item>
              <n-thing title="不让他（她）看" />
              <template #suffix>
                <n-switch v-model:value="friendPermissionObj.notGiveTaLook" size="small" />
              </template>
            </n-list-item>
            <n-list-item>
              <n-thing title="不看他（她）" />
              <template #suffix>
                <n-switch v-model:value="friendPermissionObj.noLookTa" size="small" />
              </template>
            </n-list-item>
          </n-list>
        </n-card>
      </template>
    </div>
  </easy-window>
</template>

<script setup>
import EasyWindow from "@/components/EasyWindow.vue";
import { ref } from "vue";

// 权限类型
const permissionType = ref('1')

const easyWindowRef = ref(null)

const friendPermissionObj = ref({
  notGiveTaLook: false,
  noLookTa: false
})

const handleSubmit = () => {
  console.log('提交')
};

</script>

<style scoped>
:deep(.n-card__content) {
  padding: 10px !important;
}
</style>
